<template>
  <view class="template-safety tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__back" @tap.stop="goBack">
          <view class="tn-icon-left"></view>
        </view>
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-black">
            <text class="tn-text-lg tn-padding-left">资料编辑</text>
          </view>
        </view>
      </view>
    </tn-nav-bar>
    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login__bg login__bg--top">
        <image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
      </view>
      <view class="login__wrapper tn-padding">
        <view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 50rpx;">
          修改昵称、签名
        </view>
        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 昵称 -->
          <block>
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-my"></view>
              </view>
              <view class="login__info__item__input__content">
                <input v-model="formData.nickname" 
                maxlength="20" 
                placeholder-class="input-placeholder" 
                placeholder="请输入新昵称" />
              </view>
            </view>
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-edit"></view>
              </view>
              <view class="login__info__item__input__content">
                <input v-model="formData.tags" 
                maxlength="20" 
                placeholder-class="input-placeholder" 
                placeholder="请输入新签名" />
              </view>
            </view>
          </block>
          <view class="login__info__item__button tn-bg-blue tn-color-white" 
          @click="saveUserInfo"
          hover-class="tn-hover" :hover-stay-time="150">保存</view>
        </view>
        
      </view>
      
      <!-- 底部背景图片-->
      <view class="login__bg login__bg--bottom">
        <image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
      </view>
  
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters } from 'vuex';
  import common_mixin from '@/libs/mixin/common.js';
  import { putUserInfo } from '@/libs/js/api.js';
  export default {
    name: 'TemplateSafety',
    mixins: [common_mixin],
    data() {
      return {
        // 当前选中的模式
        currentModeIndex: 0,
        // 模式选中滑块
        modeSliderStyle: {
          left: 0
        },
        formData: {
          nickname: '',
          tags: ''
        },
        // 是否显示密码
        showPassword: false,
        // 倒计时提示文字
        tips: '获取验证码'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        userId: 'userId'
      })
    },
    created() {},
    mounted() {
      this.formData.nickname = userInfo.nickname;
      this.formData.tags = userInfo.tags;
    },
    methods: {
      saveUserInfo() {
        if(!this.formData.nickname){
          this.$t.message.toast('请填写昵称！')
          return;
        }
        putUserInfo(this.formData).then(r => {
          console.log(r);
          this.goBack();
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
 /* 胶囊*/
 .tn-custom-nav-bar__back {
     width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 1000rpx;
     border: 1rpx solid rgba(255, 255, 255, 0.5);
     color: #FFFFFF;
     font-size: 18px;
     
     .icon {
       display: block;
       flex: 1;
       margin: auto;
       text-align: center;
     }
     
     &:before {
       content: " ";
       width: 1rpx;
       height: 110%;
       position: absolute;
       top: 22.5%;
       left: 0;
       right: 0;
       margin: auto;
       transform: scale(0.5);
       transform-origin: 0 0;
       pointer-events: none;
       box-sizing: border-box;
       opacity: 0.7;
       background-color: #FFFFFF;
     }
   }
 /* 自定义导航栏内容 start */
   .custom-nav {
     height: 100%;
     
     &__back {
       margin: auto 5rpx;
       font-size: 40rpx;
       margin-right: 10rpx;
       margin-left: 30rpx;
       flex-basis: 5%;
     }
     
     &__search {
       flex-basis: 71%;
       width: 100%;
       height: 100%;
       
       &__box {
         width: 100%;
         height: 70%;
         padding: 10rpx 0;
         margin: 0 30rpx;
         border-radius: 60rpx 60rpx 60rpx 0;
         font-size: 24rpx;
         // background-color: rgba(255,255,255,0.1);
       }
       
       &__icon {
         padding-right: 10rpx;
         margin-left: 20rpx;
         font-size: 30rpx;
       }
       
       &__text {
       }
     }
   }
 
  .login {
    position: relative;
    height: 100%;
    z-index: 1;
    
    /* 背景图片 start */
    &__bg {
      z-index: -1;
      position: fixed;
      
      &--top {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        .bg {
          width: 750rpx;
          will-change: transform;
        }
      }
      
      &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        // height: 144px;
        // margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      }
    }
    /* 背景图片 end */
    
    /* 内容 start */
    &__wrapper {
      margin-top: 300rpx;
      width: 100%;
    }
    
    /* 切换 start */
    &__mode {
      position: relative;
      margin: 0 auto;
      width: 476rpx;
      height: 77rpx;
      margin-top: 100rpx;
      background-color: rgba(255,255,255,0.1);
      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
      border-radius: 39rpx;
      
      &__item {
        height: 77rpx;
        width: 100%;
        line-height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        color: #78909C;
        letter-spacing: 1em;
        text-indent: 1em;
        z-index: 2;
        transition: all 0.4s;
        
        &--active {
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
      &__slider {
        position: absolute;
        height: inherit;
        width: calc(476rpx / 2);
        border-radius: inherit;
        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
        z-index: 1;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
    /* 切换 end */
    
    /* 登录注册信息 start */
    &__info {
      margin: 80rpx 30rpx 10rpx 30rpx;
      padding-bottom: 0;
      border-radius: 20rpx;
      
      &__item {
        
        &__input {
          margin-top: 59rpx;
          width: 100%;
          height: 77rpx;
          border: 1rpx solid #C6D1D8;
          border-radius: 39rpx;
          
          &__left-icon {
            width: 10%;
            font-size: 44rpx;
            margin-left: 20rpx;
            color: #78909C;
          }
          
          &__content {
            width: 80%;
            padding-left: 10rpx;
            
            &--verify-code {
              width: 56%;
            }
            
            input {
              font-size: 30rpx;
              color: #78909C;
              // letter-spacing: 0.1em;
            }
          }
          
          &__right-icon {
            width: 10%;
            font-size: 44rpx;
            margin-right: 20rpx;
            color: #78909C;
          }
          
          &__right-verify-code {
            width: 34%;
            margin-right: 20rpx;
          }
        }
        
        &__button {
          margin-top: 75rpx;
          margin-bottom: 39rpx;
          width: 100%;
          height: 77rpx;
          text-align: center;
          font-size: 31rpx;
          font-weight: bold;
          line-height: 77rpx;
          letter-spacing: 1em;
          text-indent: 1em;
          border-radius: 39rpx;
          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
        }

      }
    }
    /* 登录注册信息 end */
    
    /* 内容 end */
    
  }
  
  /deep/.input-placeholder {
    font-size: 30rpx;
    color: #C6D1D8;
  }
  
</style>
